<template>
  <!-- 自定义 动态增删 tabs 搭配 menu -->
  <div class="tab-menu">
      <el-tabs
          v-model="activeIndex"
          @tab-remove="removeTab"
          @tab-click="clickTab"
      >
          <el-tab-pane
              :key="item.name"
              v-for="item in openTab"
              :label="item.title"
              :name="item.name"
              :closable="item.closable"
          >
          <div class="tab-menu-content">
            <router-view></router-view>
          </div>
          </el-tab-pane>
      </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'MenuTabs',
  data() {
      return {
          activeIndex: '/analysis',
          openTab: [{
                name: '/analysis',
                title: '首页',
                closable: false
            }]
      };
  },
  computed: {},
  watch: {
      $route(to, form) {
          var flag = false;
          // 当前页面菜单已打开
          for (let i = 0; i < this.openTab.length; i++) {
              if (to.path == this.openTab[i].name) {
                  this.activeIndex = this.openTab[i].name;
                  flag = true;
                  break;
              }
          }
          // 打开新的页面
          if (!flag) {
              if (!to.meta.title) {
                  to.meta.title = '其他操作';
              }
              console.log(to.meta);
              let role =this.$store.state.userInfo.role;
              let  obj = {
                  title:to.meta.title,
                  name: to.path,
                  closable: true
              };
              if (role ==='renter' && to.meta.title === '在租列表') {
                 obj.title = '我的租赁'
               } else if(role ==='renter' && to.meta.title === '租赁申请'){
                obj.title = '租赁申请列表'
               } else if(role ==='renter' && to.meta.title === '退租申请'){
                obj.title = '退租申请列表'
               }
              this.activeIndex = to.path;
              if (this.openTab.some(item => item.title === obj.title)) return
              this.openTab.push(obj);
          }
      }
  },
  created() {
      const sessionTab = JSON.parse(window.sessionStorage.getItem('openTab')) || '';
      if (sessionTab) {
          if (sessionTab.openTab.length != 0 && sessionTab.openTabPath.length != 0) {
              for (let i = 0; i < sessionTab.openTab.length; i++) {
                  this.openTab.push({
                      title: sessionTab.openTab[i].title,
                      name: sessionTab.openTab[i].name,
                      closable: true
                  });
              }
              this.activeIndex = sessionTab.currActiveTabs;
              this.$router.push({ path: this.activeIndex });
          }
      }
  },
  mounted() {
      // 监听页面加载前
      window.addEventListener('beforeunload', e => {
          sessionStorage.setItem(
              'openTab',
              JSON.stringify({
                  openTab: this.openTab.filter(
                      item => item.name != '/analysis'
                  ),
                  openTabPath: this.openTab.filter(
                      item => item.name !== '/analysis'
                  ),
                  currActiveTabs: this.activeIndex
              })
          );
      });
  },
  methods: {
      clickTab(tab) {
          this.activeIndex = tab.paneName;
          this.$router.push({ path: this.activeIndex });
      },
      removeTab(target) {
          // 删除的是当前选中的页面
          if (this.activeIndex === target) {
              this.openTab.forEach((item, index) => {
                  if (item.name == target) {
                      let nextTab = item[index + 1] || item[index - 1];
                      if (nextTab) {
                          this.activeIndex = nextTab.name;
                      }
                  }
              });
          }
          var i = 0;
          this.openTab.forEach((item, index) => {
              if (item.name == target) {
                  // eslint-disable-next-line no-return-assign
                  return (i = index);
              }
          });
          this.openTab.splice(i, 1);

          // 更新路由
          this.$router.push({ path: this.openTab[this.openTab.length - 1].name });
      }
  }
};
</script>

<style lang="scss" scoped>
.tab-menu {
    ::v-deep .el-tabs__header {
        background: #fff;
        padding-left: 10px;
    }
    .tab-menu-content {
        padding:0 10px;
    }

}

</style>
